<template>
  <div class="payment">
    <van-nav-bar title="用户结算" left-arrow @click-left="goback" />
    <section>
      <div class="bg"></div>
      <div class="address">
        <div class="address-content" @click="goPath">
          <h3>{{path.name}}<span>{{tel | newTel(tel) }}</span></h3>
          <p>{{path.province}}-{{path.city}}-{{path.county}}-{{path.addressDetail}}</p>
        </div>
        <div class="arrow">
          <i class="iconfont icon-right"></i>
        </div>
      </div>
      <div class="payMode">
        <van-radio-group v-model="radio">
          <van-cell-group>
            <van-cell clickable @click="radio = '1'">
              <template #title class="img">
                <img src="../assets/img/pay_zfb2.png" alt="" />
                <span>支付宝支付</span>
              </template>
              <template #right-icon>
                <van-radio name="1" />
              </template>
            </van-cell>
            <van-cell clickable @click="radio = '2'">
              <template #title>
                <img src="../assets/img/pay_wx.png" alt="" />
                <span>微信支付</span>
              </template>
              <template #right-icon>
                <van-radio name="2" />
              </template>
            </van-cell>
          </van-cell-group>
        </van-radio-group>
      </div>
      <div class="freight">
        <van-cell title="运费" value="包邮" />
        <van-cell title="电子普通发票" is-link value="个人" />
        <van-cell title="优惠券" is-link/>
      </div>
      <div class="shopMsg">
        <p>商品价格： 9999</p>
        <p>配送费用：0.00</p>
      </div>
    </section>
    <footer>
      <div class="pay-content">
        共计3件 合计：9999.00
      </div>
      <div class="pay-btn">
        <button @click="goPayment">去付款</button>
      </div>
    </footer>
  </div>
</template>

<script>
import http from '@/serveies/api/request'
import bus from '@/serveies/bus'
import { Toast } from 'mint-ui'
import qs from 'qs'
export default {
  name: 'Payment',
  data () {
    return {
      radio: '1',
      path: {},
      tel: ''
    }
  },
  created () {
    this.__initAddress()
    bus.$on('selectPathItem', (res) => {
      this.path = res
    })
  },
  filters: {
    newTel (tel) {
      var reg = /^(\d{3})\d{4}(\d{4})$/
      return tel.replace(reg, '$1****$2')
    }
  },
  methods: {
    __initAddress () {
      http
        .$axios({
          url: '/api/selectAddress',
          method: 'POST',
          headers: {
            token: true
          }
        })
        .then((res) => {
          // this.initGetData(res.data)
          const arr = res.data.filter(v => {
            return v.isDefault === 'true'
          })
          this.path = arr[0] || res.data
          this.tel = this.path.tel
        })
    },
    goPath () {
      this.$router.push({
        path: '/path'
      })
    },
    goback () {
      this.$router.back()
    },
    goPayment () {
      // 判断是否选择了收获地址
      if (!this.path) {
        return Toast('请选择收货地址')
      }
      // 模拟订单号

      const dataOrder = {
        orderId: 'xmfp' + parseInt(Math.random() * 10000000000000)
      }
      // 发送请求
      http
        .$axios({
          url: '/api/payment',
          method: 'POST',
          headers: {
            token: true,
            'content-type': 'application/x-www-form-urlencoded'
          },
          data: qs.stringify(dataOrder)
        })
        .then((res) => {
          // 购物车数据清空
          if (res.success) {
            window.location.href = res.paymentUrl
            // window.open(res.paymentUrl)
          }
        })
    }
  }
}
</script>

<style lang="scss" scoped>
.payment {
  width: 100vw;
  height: 100vh;
  background-color: #eee;
  ::v-deep .van-nav-bar .van-icon {
    color: #333;
    font-size: 0.48rem;
  }
  section {
    .bg {
      width: 100%;
      height: 0.106667rem;
      background: #fff url("../assets/img/bd1.png") 0 0 repeat;
      background-size: 1.386667rem 0.213333rem;
      position: relative;
    }
    .address {
      display: flex;
      justify-content: space-around;
      width: 100%;
      padding: 0.266667rem 0;
      background-color: #fff;
      margin-bottom: 0.266667rem;
      .address-content {
        h3 {
          color: #333;
          font-size: 0.48rem;
          font-weight: 500;
          span {
            padding-left: 0.270270rem;
          }
        }
        p {
          font-size: 0.373333rem;
        }
      }
      .arrow {
        i {
          font-size: 0.48rem;
        }
      }
    }
    .payMode {
      width: 100%;
      .van-cell-group {
        .van-cell {
          .van-cell__title {
            img {
              width: 24px;
              height: 24px;
              margin-right: 10px;
              vertical-align: middle;
            }
          }
        }
      }
    }
    .freight {
      width: 100%;
      margin-top: .266667rem;
    }
    .shopMsg {
      margin-top: .266667rem;
      background-color: #fff;
      padding: .266667rem .533333rem;
      p {
        font-size: .373333rem;
        line-height: .8rem;
      }
    }
  }
  footer {
    position: fixed;
    bottom:0;
    left:0;
    right: 0;
    width: 100%;
    height: 1.386667rem;
    display: flex;
    align-items: center;
    background-color: #fff;
    .pay-content {
      width: 50%;
      font-size: .373333rem;
      text-align: center;
      color: #ff6700;
      font-weight: 600;
    }
    .pay-btn {
      width: 50%;
      height: 1.386667rem;
      button{
        width: 100%;
        height: 100%;
        border:none;
        background-color: #ff6700;
        font-size: .426667rem;
        color: #fff;
      }
    }

  }
}
</style>
